<template>
  <div class="tip-dialog">
    <el-dialog
      v-model="dialogTableVisible"
      :close-on-click-modal="false"
      title="提示"
      width="380"
      align-center
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleOK">确定</el-button>
        </div>
      </template>
      <span class="tip-text"
        >发现导入的表格存在多个工作表，请选择其中一个进行导入</span
      >
      <div class="card">
        <el-radio-group v-model="checkedSheet">
          <template #default>
            <div class="radio-container">
              <el-radio v-for="item in sheetNameArr" :key="item" :value="item">
                <template #default>
                  <div class="radio-item">
                    <img :src="ExcelIcon" />
                    <span class="text">{{ item }}</span>
                  </div>
                </template>
              </el-radio>
            </div>
          </template>
        </el-radio-group>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import ExcelIcon from '@renderer/assets/icon/ExcelIcon.svg'
import useFileRenameExcelStore from '@renderer/store/Excel/FileRenameExcelStore'
import { ref, onMounted } from 'vue'

const dialogTableVisible = ref(false)

const checkedSheet = ref<string>()
const sheetNameArr = ref<string[]>()

const handleCancel = ref<() => void>()
const handleOK = ref<() => void>()

onMounted(() => {
  window.api.selectExcelSheet(loadDialog, getExcelInitialData)
})

// 加载对话框
function loadDialog(sheetNames: string[]): Promise<string | undefined> {
  return new Promise((resolve) => {
    checkedSheet.value = undefined
    sheetNameArr.value = sheetNames
    dialogTableVisible.value = true

    handleCancel.value = () => {
      dialogTableVisible.value = false
      resolve(undefined)
    }

    handleOK.value = () => {
      if (!checkedSheet.value) {
        ElMessage({
          message: '至少选择一个工作表',
          type: 'warning'
        })
        return
      }

      dialogTableVisible.value = false
      resolve(checkedSheet.value)
    }
  })
}

const fileRenameExcelStore = useFileRenameExcelStore()

// 获取解析的 Excel 数据
function getExcelInitialData(excelInitialData: IExcelInitialData) {
  if (excelInitialData) {
    fileRenameExcelStore.setExcelInitialData(excelInitialData)
    if (excelInitialData.excelFileContent.length > 0) {
      ElMessage({
        message: '上传成功',
        type: 'success',
        offset: 48
      })
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-radio-group) {
  width: 100%;
}

:deep(.el-radio) {
  width: 100%;
  margin-bottom: 18px;
}

:deep(.el-radio__label) {
  width: 100%;
}

:deep(.el-dialog__title) {
  font-weight: bold;
}

.tip-dialog {
  .tip-text {
    line-height: 1.8;
  }

  .card {
    margin-top: 6px;
    padding: 16px;
    background: #f1f2f6;
    border-radius: 4px;

    .radio-container {
      display: flex;
      flex-direction: column;
      width: 100%;

      .radio-item {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid var(--el-border-color);
        padding: 8px;
        width: 100%;
        border-radius: 4px;
        background: #fff;

        img {
          width: 22px;
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
